<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="UTF-8">
		<link rel="shortcut icon" href="D:\Useless\Desktop\icon.png" type="image/x-icon">
		<title>我是标题</title>
		<!-- 我是注释，Html的注释格式! -->
    </head>
	
	<body>
		
		<h3>&nbsp&nbsp&nbsp&nbsp了解html的标签和属性:</h3>
		
		<!-- 内容和无效标签 -->
		<div id="1" name="n1" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<!-- 没有标签，输出文本，是不换行显示的，并非原样展示 -->
				<h1>我是内容</h1>
				都 是勇敢的
				你额头的伤口 你的不同 你犯的错
				都 不必隐藏
				你破旧的玩偶 你的面具 你的自我
				
				
				他们说 要带着光 驯服每一头怪兽
				他们说 要缝好你的伤 没有人爱小丑
				为何孤独 不可光荣
				人只有不完美 值得歌颂
				谁说污泥满身的不算英雄
				
				<!-- 换不换行不是我们怎么写的就怎么输出,Html的文本内容默认是不换行的.我们写多少行都没用.展示出来都是一行 -->
				<!-- 为什么编辑器显示换行而网页中显示不换行呢? -->
				<!-- 是因为编辑器认识\n,将\n处理成换行的效果了,而Html不认识\n,直接无视了它. -->
				
				
			</div>
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是无效标签</h1>
				<!-- 无效标签 -->
				<br />
				<br /><abcdefg>我是一个无效的标签:abcdefg</abcdefg>
				<br /><higklmn>我还是一个无效标签:higklmn</higklmn>
				<br />
			</div>
		</div>
		
		
		<!-- 标题和段落 -->
		<div id="2" name="n2" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<!-- 下边我们来学习Html的一些简单标签： -->
				<h1>我是标题</h1>
				<h1>一级标题</h1>
				<h2>二级标题</h2>
				<h3>三级标题</h3>
				<h4>四级标题</h4>
				<h5>五级标题</h5>
				<h6>六级标题</h6>
				<h7>假的标题</h7>
				<h8>假的标题</h8>	
				<!-- html的标题,只有h1~h6,超过h6的就不是Html的标签了,h7和h8在这里是无效标签,无效标签不具备任何功能,解析的时候只解析标签中的内容.这里的两个假的标题都是直接展示.并且,h1到h6都是换行的,h7和h8没有进行换行,这里换不换行是由标签决定的.也就是说,有的标签是换行显示的,但有的标签并不换行显示.像这里的h7和h8是属于是无效标签,因此不换行. -->
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				
				<!-- 无效标签也是不换行的,因此换行是Html标签决定的! -->
				<h1>我是段落</h1>
				<p>啊 对对对</p>
				<p>你根本不胖</p>
				<p>你只不过是</p>
				<p>增加了几十斤的重量</p>
				<p>你没有水桶腰</p>
				<p>也没有大象腿</p>
				<p>只不过是一天四五顿</p>
				<p>还管不住嘴</p>
				
			</div>
		</div>
		
		
		<!-- 有序列表和无序列表 -->
		<div id="3" name="n3" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<!-- 有序列表: -->
				<h1>我是有序列表</h1>
				<ol>
					<li>诗神苏轼
						<ol>
							<li>《赤壁赋》</li>
							<li>《题西邻壁》</li>
							<li>《浣溪沙》</li>
						</ol>
					</li>

					<li>诗仙李白
						<ol>
							<li>《蜀道难》</li>
							<li>《将进酒》</li>
							<li>《望庐山瀑布》</li>
						</ol>
					</li>

					<li>诗圣杜甫
						<ol>
							<li>《石壕吏》</li>
							<li>《登高》</li>
							<li>《望岳》</li>
						</ol>
					</li>
				</ol>
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是无序列表</h1>
				<ul>
					<li>吴京
						<ul>
							<li>流浪地球</li>
							<li>战狼二</li>
							<li>我和我的祖国</li>
						</ul>
					</li>
					<li>周星驰
						<ul>
							<li>逃学威龙</li>
							<li>大话西游</li>
							<li>喜剧之王</li>
							<li>长江七号</li>
						</ul>
					</li>
					<li>杰森斯坦森
						<ul>
							<li>非常人贩</li>
							<li>机械师</li>
							<li>速度与激情7</li>
							<li>敢死队</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		
		
		<!-- 表格和 -->
		<div id="4" name="n4" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是表格</h1>
				<table border = "1">
					<tr>
						<th>姓名</th>
						<th>性别</th>
						<th>年龄</th>
					</tr>
					<tr>
						<td>习近平</td>
						<td>男</td>
						<td>59</td>
					</tr>
					<tr>
						<td>普京</td>
						<td>男</td>
						<td>69</td>
					</tr>
					<tr>
						<td>特朗普</td>
						<td>男</td>
						<td>75</td>
					</tr>
					<tr>
						<td>乔·拜登</td>
						<td>难</td>
						<td>79</td>
					</tr>
				</table>
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是图片</h1>
				<h4>原图：</h4>
				<img src="https://s1.ax1x.com/2022/05/03/OAKkEF.png" />
				<h4>限制大小的图：</h4>
				<img width="50px" height="50px" src="https://s1.ax1x.com/2022/05/03/OAKkEF.png" />
			</div>
		</div>
		
		
		<!-- 链接和图片 -->
		<div id="5" name="n5" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是超链接</h1>
				<a href="http://www.baidu.com">百度一下 , 你就知道</a>
				<br /><br /><br />
				<a href="https://cn.bing.com/">必应</a>
				<br /><br /><br />
				<p>点击超链接，会跳转到超链接指向的网站。</p>
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是图片超链接</h1>
				<br />
				<a href="http://www.baidu.com">
					<img width="50px" height="50px" src="https://s1.ax1x.com/2022/05/03/OAKkEF.png" />
				</a>
				<br /><br /><br /><br />
				<p>点击图片，会跳转到图片指向的网站。</p>				
			</div>
		</div>
		
		
		<!-- 普通文本输入框和密码输入框 -->
        <div id="6" name="n6" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是普通文本输入框</h1>
				请输入内容: <input type="Text" placeholder="请输入内容,内容会展示"></input>
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是密码输入框</h1>
				请输入密码: <input type="password" placeholder="请输入密码,密码不会展示"></input>
			</div>
		</div>
		
		
		<!-- 隐藏的输入框和邮件输入框 -->
		<div id="7" name="n7" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是隐藏输入框</h1>
				我是隐藏的框:<input type="hidden"></input><br /><br />
				我是无效的框:<input type="ddsdsd"></input><br /><br />
				我是默认的框:<input></input><br /><br />
				<p>隐藏的框一般是前后端提交数据用的.页面不展示,但是数据能提交(name和value属性)</p><br />
				<p>这里无效的框,指的是type的值是无效的值,而不是输入框无效.</p>
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是邮件输入框</h1>
				请输入邮箱:<input type="email" src="D:\Useless\Desktop\icon.png"></input><br />
				<p>写完邮件内容之后,鼠标停放在上边,我会进行检查并给出提示(这个检查并不是很严格)</p>
				<p>输入框还有电话(tel),链接(url),数字(number),数字范围(range),颜色(color)等</p>
			</div>
		</div>
		
		
		<!-- 时间输入框和颜色选择框 -->
		<div id="8" name="n8" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是本地时间输入框</h1>
				<input type="datetime-local"></input>
				<p>时间还有(type):</p>
				<p>&nbsp &nbsp &nbsp &nbsp Date</p>
				<p>&nbsp &nbsp &nbsp &nbsp Month</p>
				<p>&nbsp &nbsp &nbsp &nbsp Week</p>
				<p>&nbsp &nbsp &nbsp &nbsp Time</p>
				<p>&nbsp &nbsp &nbsp &nbsp Datetime</p>
				<p>等</p>
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是颜色选择框</h1>
				<input type="color" value="#ff0000"></input><br /><br />
				<input type="color" value="#00ff00"></input><br /><br />
				<input type="color" value="#0000ff"></input><br /><br />
			</div>
		</div>
		
		
		<!-- 搜索框和单选按钮 -->
		<div id="9" name="n9" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是搜索框</h1>
				<input type="search"></input>
				<input type="search"></input>
				<p>搜索框就是最后有一个 X 号,输入文本之后,点击 X 号可以删除输入的文本.</p>
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是单选按钮</h1>
				<input type="radio" name="爱妃">a妃</input>
				<br />
				<input type="radio" name="爱妃">b妃</input>
				<br />
				<input type="radio" name="爱妃">c妃</input>
			</div>
		</div>
		
		
		<!-- 多选框和普通按钮 -->
		<div id="10" name="n10" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是多选框</h1>
				<input type="checkbox" name="many">a</input>
				<input type="checkbox" name="many">b</input>
				<input type="checkbox" name="many">c</input>
				<input type="checkbox" name="many">d</input>
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是普通按钮</h1>
				<input type="button" value="按钮" style="color:red"  onclick="window.location.href='http://www.baidu.com'"></input>
				<input type="button" value="按钮"></input>
				<input type="button" value="按钮"></input>
			</div>
		</div>
		
		
		<!-- 提交按钮和重置按钮 -->
		<div id="11" name="n11" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是提交按钮</h1>
				<input type="submit"></input>
				<input type="submit"></input>
				<input type="submit"></input>
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是重置按钮</h1>
				<input type="reset"></input>
				<input type="reset"></input>
				<input type="reset"></input>
			</div>
		</div>
		
		
		<!-- 图片按钮和文件上传按钮 -->
		<div id="12" name="n12" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是图片按钮</h1>
				<input type="image" src="D:\Useless\Desktop\icon.png"></input>
				<input type="image" src="D:\Useless\Desktop\icon.png"></input>
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是文件上传</h1>
				<input type="file"></input>
			</div>
		</div>
		
		
		<!-- 下拉选择框和文本域 -->
		<div id="13" name="n13" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是下拉框</h1>
				<select>
					<option>未选择</option>
					<option>选项一</option>
					<option>选项二</option>
					<option>选项三</option>
					<option>选项四</option>
				</select>
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是文本域</h1>
				<textarea rows="16" cols="40">
				
				</textarea>
			</div>
		</div>
		
		
		<!-- form表单（提交百度和bing搜索） -->
		<div id="14" name="n14" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>我是form表单</h1>
				<form action="http://www.baidu.com" method="get">
					<input type="submit"></input>
				</form>
				<p>
					点击提交会跳转到百度首页。
				</p>
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>form表单转bing</h1>
				<form action="https://global.bing.com/search" method="get">
					<input type="text" name="q" value="Donald Trump"></input>
					<input type="submit"></input>
				</form>
				<p>
					点击提交会跳转必应搜索特朗普
				</p>
			</div>
		</div>
		
		
		<!-- form表单，百度搜索和实现注册 -->
		<div id="15" name="n15" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>form表单转百度</h1>
				<form action="https://www.baidu.com/s" method="get">
					<input type="text" name="wd" value="特朗普"></input>
					<input type="submit"></input>
				</form>
				<p>
					点击提交会跳转百度搜索特朗普
				</p>
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1>form表单转注册</h1>
				<form action="http://124.70.93.25:8080/colatest/colamember/registMember.do" method="get">
					<!-- 先以文本加input的方式讲解,引出没法对其,再引出可以使用table ! -->
					<table >
						<tr>
							<td width="120px" style="text-align:middle">请输入账号:</td>
							<td><input type="text" placeholder="请输入账号" name="accountId"></input><br/></td>
						</tr>
						<tr>
							<td width="120px" style="text-align:middle">请输入用户名:</td>
							<td><input type="text" placeholder="请输入用户名" name="accountName"></input><br/></td>
						</tr>
						<tr>
							<td width="120px" style="text-align:middle">请输入密码:</td>
							<td><input type="text" placeholder="请输入密码" name="accountPWD"></input><br/></td>
						</tr>
						<tr>
							<td width="120px" style="text-align:middle">请输入手机号:</td>
							<td><input type="text" placeholder="请输入手机号" name="phoneNumber"></input><br/></td>
						</tr>
						<tr>
							<td width="120px" style="text-align:middle">请选择账号类型:</td>
							<td>
								<input type="radio" name="accountType" value="1">1</input>
								<input type="radio" name="accountType" value="2">2</input>
								<input type="radio" name="accountType" value="3">3</input>
							</td>
						</tr>
						<input type="hidden" name="holdMoney" value="0"></input>
					</table>
					<input type="submit"></input>
				</form>
				<p>
					点击提交,会调用服务器的注册接口,提交输入框中的内容到注册接口.
				</p>
			</div>
		</div>
		
		
		<!-- 自学练习区域 -->
		<!-- 自学标签的时候,放在内部div中调试 -->
		<div id="16" name="n16" class="no_class">
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1></h1>
				
			</div>
			
			<div style="float:left;border:3px solid;width:300px;height:400px;margin-top:20px;margin-left:10px;padding:20px">
				<h1></h1>
				
			</div>
		</div>
		
		
		<!-- iframe -->
		<div style="float:left;margin-top:20px;margin-left:10px;border:3px solid;width:1370px;height:800px;padding:20px">
			<h1>我是iframe</h1>
			<iframe width="1360px" height="500px" src="https://www.yljt.cn/"></iframe>
			<br />
			<p>iframe是将别的网页直接引入到当前网页中.</p>
			<p>iframe引入网页是引入全部内容,放在iframe中.</p>
			<p>观察浏览器的控制台中Element内的层级关系</p>
			<p>会发现到了iframe之后,后面又出现了html标签</p>
			<p>也就是说iframe是将整个网页嵌套在当前网页中</p>
		</div>

    </body>

</html>